<template>
  <div class="project">
    <div class="list-show">
      <div v-for="item,index in list_data" :key="index" class="project-item">
        <div class="title">
          <div>{{ item.name }}</div>
          <div>待签约</div>
        </div>
        <div class="detail-item">
          <div>车牌：{{ item.chepai }}</div>
          <div>车辆识别码：{{ item.shibienum }}</div>
          <div>支付事件：{{ item.time }}</div>
        </div>
        <div class="btn-box">
          <div class="show-detail-btn" @click="handleDeail(item)">查看详情</div>
          <div class="btn-cancle">取消</div>
        </div>
      </div>
      <div>无更多内容</div>
    </div>
    <div class="bottom-box">
      <div @click="handleNew" class="add-btn">新增</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "demoOne",
  data() {
    return {
      list_data: [
        {
          id: 1,
          name: "wang",
          type: "抵押办理",
          status: "待签约",
          chepai: "1212121",
          shibienum: "233232323",
          time: "2022-1212",
        },
        {
          id: 2,
          name: "wang",
          type: "抵押办理",
          status: "待签约",
          chepai: "1212121",
          shibienum: "233232323",
          time: "2022-1212",
        },
        {
          id: 3,
          name: "wang",
          type: "抵押办理",
          status: "待签约",
          chepai: "1212121",
          shibienum: "233232323",
          time: "2022-1212",
        },
        {
          id: 4,
          name: "wang",
          type: "抵押办理",
          status: "待签约",
          chepai: "1212121",
          shibienum: "233232323",
          time: "2022-1212",
        },
        {
          id: 5,
          name: "wang",
          type: "抵押办理",
          status: "待签约",
          chepai: "1212121",
          shibienum: "233232323",
          time: "2022-1212",
        },
        {
          id: 6,
          name: "wang",
          type: "抵押办理",
          status: "待签约",
          chepai: "1212121",
          shibienum: "233232323",
          time: "2022-1212",
        },
        {
          id: 7,
          name: "wang",
          type: "抵押办理",
          status: "待签约",
          chepai: "1212121",
          shibienum: "233232323",
          time: "2022-1212",
        },
        {
          id: 8,
          name: "wang",
          type: "抵押办理",
          status: "待签约",
          chepai: "1212121",
          shibienum: "233232323",
          time: "2022-1212",
        },
        {
          id: 9,
          name: "wang",
          type: "抵押办理",
          status: "待签约",
          chepai: "1212121",
          shibienum: "233232323",
          time: "2022-1212",
        },
        {
          id: 10,
          name: "wang",
          type: "抵押办理",
          status: "待签约",
          chepai: "1212121",
          shibienum: "233232323",
          time: "2022-1212",
        },
      ],
      reachBottomDistance: 100, //距离底部多久触发
      isReachButtom: false, //限制进入触底后只执行一次
    };
  },
  mounted() {
    console.log(`the component is now mounted.`);
    let dom = document.querySelector(".list-show");
    dom.addEventListener("scroll", this.onScroll);
  },
  // created:
  methods: {
    handleDeail(item) {
      this.$router.push(
        `/cardemo/projectdemo-detail?id=${item.id}&type=detail`
      );
    },
    handleNew() {
      this.$router.push(`/cardemo/projectdemo-detail?type=new`);
    },
    onScroll(e) {
      let scrollTop = e.target.scrollTop;
      let scrollHeight = e.target.scrollHeight;
      let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height);
      let currentHeight = scrollTop + offsetHeight + this.reachBottomDistance;
      if (currentHeight < scrollHeight && this.isReachButtom) {
        this.isReachButtom = false;
      }
      if (this.isReachButtom) {
        return;
      }
      if (currentHeight >= scrollHeight) {
        this.isReachButtom = true;
        //可视高度+滚动高度 + 距离底部的触发距离>=实际高度
        console.log("触底调接口");
      }
    },
  },
};
</script>
<style scoped lang="less">
.project {
  padding: 0 !important;
  height: calc(100% - 53px);
  width: 100%;
  background-color: rgb(235, 230, 230);
  .list-show {
    padding: 20px 20px 40px 20px;
    position: relative;
    height: calc(100% - 71px);
    overflow: auto;
    padding-bottom: 100px;
  }

  .project-item {
    background-color: #fff;
    padding: 10px 20px;
    margin-bottom: 5px;
    border-radius: 4px;
    .title {
      display: flex;
      justify-content: space-between;
      div:first-child {
        font-weight: 700;
        font-size: 20px;
      }
    }
    .detail-item {
      color: rgb(141, 137, 137);
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgb(233, 225, 225);
    }
    .btn-box {
      display: flex;
      justify-content: flex-end;
      div {
        margin-left: 20px;
      }
      .show-detail-btn {
        background-color: rgb(25, 137, 250);
        color: #fff;
        padding: 0 10px;
        border-radius: 5px;
      }
      .btn-cancle {
        background-color: rgb(212, 209, 204);
        border-radius: 10px;
        padding: 0 10px;
        border: 1px solid rgb(25, 137, 250);
        color: red;
      }
    }
  }
  .bottom-box {
    background-color: #fff;
    padding: 20px;
    bottom: 0;
    .add-btn {
      background-color: rgb(25, 137, 250);
      width: 50%;
      margin: auto;
      text-align: center;
      border-radius: 50px;
      padding: 5px;
      color: #fff;
    }
  }
}
</style>
